<template>
  <el-card class="box-card" style="margin: 10px 0px">
    <div>
      <div class="charts" ref="charts"></div>
    </div>
  </el-card>
</template>

<script>
//引入echarts
import echarts from "echarts";
export default {
  name: "Visit",
  data() {
    return {
      mycharts: null,
      dataList1: [800, 708, 920, 1090, 1200],
      dataList2: [400, 468, 520, 690, 800],
      dataList3: [500, 668, 520, 790, 900],
      dataList4: [600, 508, 720, 890, 1000],
    };
  },
  mounted() {
    //初始化echarts实例
    this.mycharts = echarts.init(this.$refs.charts);
    //配置数据
    this.mycharts.setOption({
      title: [
        {
          text: "文章访问量",
          textStyle: {
            fontSize: 18,
            color: "black",
            fontWeight: 700,
          },
          left: "center",
          top: "2%",
        },
      ],
      color: ["#fd956a", "#2bb6db", "#13cfd5", "#00ce68"],
      tooltip: {
        trigger: "axis",
        backgroundColor: "#fff",
        textStyle: {
          color: "#333",
          fontSize: 14,
        },
        axisPointer: {
          type: "line",
          lineStyle: {
            type: "dashed", //  默认是实线类型
          },
        },
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);", // 自定义的 CSS 样式
        formatter: function (params, ticket, callback) {
          var res = params[0].name;

          for (var i = 0, l = params.length; i < l; i++) {
            res +=
              "<br/>" +
              params[i].marker +
              params[i].seriesName +
              "&nbsp;&nbsp;&nbsp;<b>" +
              (params[i].value ? params[i].value : "-") +
              "</b>";
          }
          return res;
        },
      },
      toolbox: {
        show: true,
        feature: {
          left: "center",
          top: "10%",
          dataView: {
            readOnly: false,
          },
          magicType: {
            type: ["line", "bar"],
            option: {
              // line: {
              //   color: "rgb(100, 100, 100)",
              //   backgroundColor: "rgb(100, 100, 100)",
              // },
            },
          },
          restore: {},
          saveAsImage: {},
        },
      },
      grid: {
        left: "2%",
        top: "15%",
        right: "2%",
        containLabel: true,
      },
      legend: {
        data: ["奇趣事", "会生活", "爱旅行", "趣美味"],
        left: "center",
        top: "8%",
      },
      xAxis: [
        {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          data: ["1月", "2月", "3月", "4月", "5月"],
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "访问量",
          min: 0,
          position: "left",
          axisLabel: {
            formatter: "{value}",
          },
        },
      ],
      dataZoom: [
        {
          type: "slider",
          xAxisIndex: 0,
          filterMode: "empty",
          start: 0,
          end: 80,
        },
        {
          type: "inside",
          xAxisIndex: 0,
          filterMode: "empty",
          top: "90%",
          axixPointer: {
            type: "cross",
          },
          start: 0,
          end: 80,
        },
      ],
      series: [
        {
          name: "奇趣事",
          type: "bar",
          // label: {
          //   normal: {
          //     show: true,
          //     position: "top",
          //   },
          // },
          barWidth: 20,
          data: this.dataList1,
          areaStyle: {
            normal: {
              // color: ["#fd956a", "#2bb6db", "#13cfd5", "#00ce68"],
              color: "#fd956a",
              opacity: 0.7,
            },
          },
        },
        {
          name: "会生活",
          type: "bar",
          // label: {
          //   normal: {
          //     show: true,
          //     position: "top",
          //   },
          // },
          barWidth: 20,
          data: this.dataList2,
          areaStyle: {
            normal: {
              // color: ["#fd956a", "#2bb6db", "#13cfd5", "#00ce68"],
              color: "#2bb6db",
              opacity: 0.7,
            },
          },
        },
        {
          name: "爱旅行",
          type: "bar",
          // label: {
          //   normal: {
          //     show: true,
          //     position: "top",
          //   },
          // },
          barWidth: 20,
          data: this.dataList3,
          areaStyle: {
            normal: {
              // color: ["#fd956a", "#2bb6db", "#13cfd5", "#00ce68"],
              color: "#13cfd5",
              opacity: 0.7,
            },
          },
        },
        {
          name: "趣美味",
          type: "bar",
          // label: {
          //   normal: {
          //     show: true,
          //     position: "top",
          //   },
          // },
          barWidth: 20,
          data: this.dataList4,
          areaStyle: {
            normal: {
              // color: ["#fd956a", "#2bb6db", "#13cfd5", "#00ce68"],
              color: "#00ce68",
              opacity: 0.7,
            },
          },
        },
      ],
    });

    //顶部是mounted：为什么第一次没有数据，没有数据因此不显示
  },
  methods: {},
};
</script>

<style scoped>
.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.charts {
  height: 400px;
}
::v-deep .el-card__body {
  padding: 0;
}
</style>
